<!-- 流水排行榜规则弹窗组件 -->
<!-- 已弃用，考虑删除 -->
<template>
  <with-mask :is-show="influenceRankCurrentModalType === 'rule'">
    <div class="container">
      <!-- 规则 -->
      <div class="rule-dialog">
        <!-- 标题 -->
        <div class="title">
          <image
            class="title-img"
            src="https://ustatic.hudongmiao.com/joymew-host-contest/influence-rank-rule-title.png"
            alt=""
          />
        </div>
        <!-- 内容 -->
        <div class="content">
          <text class="paragraph">
            1.您可将活动页面分享给好友（具体分享方式以平台内实际提供的分享方式为准），被您邀请的好友通过您的分享链接进入活动小程序页面并成功领取奖励的喵豆即视为您邀请好友成功。您可在【邀请记录】中查看被您成功邀请的好友。为保证系统稳定，每日被您成功邀请的嗨喵好友不得超过100位（包括100位）。
          </text>
          <text class="paragraph">
            2. 平台将按照活动期间邀请好友参与活动的人数多少来决定名次高低，若邀请的人数相同，按照所邀请人数的总活动场次的总红包口袋流水金额大小来决定名次。
          </text>
          <text class="paragraph">
            3.如您邀请嗨喵老用户（指在您邀请前已经注册登录过嗨喵的用户）参与活动，邀请成功后，“互动影响力榜单”中邀请好友数量增加1位；如您邀请嗨喵新用户（指在您邀请前尚未注册登录过嗨喵的用户）参与活动，则在新用户在使用嗨喵大屏互动完成一场真实有效活动（签到30人以上）后，“互动影响力榜单”中邀请好友数量增加1位。
          </text>
        </div>
        <!-- 我知道了按钮 -->
        <div
          class="confirm-btn"
          @click="changeInfluenceRankCurrentModalType('no')"
        >
          我知道了
        </div>
      </div>
      <!-- 关闭按钮 -->
      <div
        class="close-btn"
        @click="changeInfluenceRankCurrentModalType('no')"
      >
        <image
          class="close-btn-img"
          src="@/static/icons/common/close.png"
          alt=""
        />
      </div>
    </div>
  </with-mask>
</template>

<script lang="ts" setup>
import { storeToRefs } from 'pinia';
import { useRank } from '@/stores/rank';

const { influenceRankCurrentModalType } = storeToRefs(useRank());
const { changeInfluenceRankCurrentModalType } = useRank();
</script>

<style lang="scss" scoped>
.container {
  display: grid;
  grid-template:
    "ruleDialog" 1fr
    "closeBtn" 48px;
  row-gap: 20px;
  justify-items: center;

  .rule-dialog {
    grid-area: ruleDialog;

    width: calc(73.8462vw - 20px);

    background-color: #fff;
    border-radius: 16px;

    padding: 10px 20px;
    display: grid;
    grid-template:
      "title" 20px
      "content" 1fr
      "taskBtn" 48px;
    row-gap: 20px;
    align-items: center;
    justify-items: center;

    // 标题
    .title {
      grid-area: title;

      width: 202px;
      height: 20px;

      .title-img {
        width: 100%;
        height: 100%;
      }
    }

    // 内容
    .content {
      grid-area: content;

      height: 300px;
      overflow: scroll;
      overflow-x: hidden;

      display: flex;
      flex-direction: column;

      font-size: 15px;
      line-height: 27px;
      color: #333;
      text-align: justify;

      .heading {
        margin-top: 5px;

        font-weight: 600;
      }

      .paragraph {
        margin-top: 5px;

        display: block;
      }
    }

    // 查看任务页按钮
    .confirm-btn {
      grid-area: taskBtn;

      width: 240px;
      height: 36px;

      background: #ff2459;
      border-radius: 34px;

      font-size: 15px;
      font-weight: 500;
      line-height: 36px;
      color: #fff;
      text-align: center;
    }
  }

  // 关闭按钮
  .close-btn {
    grid-area: closeBtn;

    width: 47px;
    height: 47px;

    .close-btn-img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
